<template>
  <!-- 2021年5月25号开发完成  开发人员：王世龙 开发模块运营赋能 -->
  <div>
    <main>
      <div class="Banner">
        <!-- <img v-lazy="require('./img/banner.png')" alt="" class="banner" /> -->
        <img :src="yyfn1.bgImg" alt="" class="banner">
        <span class="yyfn">{{yyfn1.title}}</span>
        <span class="js"
          >{{yyfn1.subtitle}}</span
        >
      </div>
      <div class="bg1">
        <div v-html="yyfnxqy1"></div>
      </div>
      <Header></Header>
      <Footer></Footer>
    </main>
  </div>
</template>

<script>
//引入头部组件
import { getYyfn,getYyfnxqy } from "@/api/wslapi/";
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
//引入jquery
export default {
  created(){
  this.yyfn();
  this.yyfnxqy();
  },
  data () {
    return {
      yyfn1:[],
      yyfnxqy1:[]
    }
  },
  methods: {
    yyfnxqy(){
       getYyfnxqy().then((res) => {
        this.yyfnxqy1 = res.data.content;
        console.log(res.data.content);
      });
    },
    yyfn(){
       getYyfn().then((res) => {
        this.yyfn1 = res.data.data;
        console.log(res.data.data);
      });
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
.Banner {
  position: relative;
  height: 600px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 600px;
    width: 100%;
  }
  .banner {
    height: 600px;
    width: 100%;
    position: absolute;
  }

  .yyfn {
    width: 206px;
    height: 67px;
    font-size: 48px;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .js {
    width: 600px;
    height: 66px;
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
.bg1 {
  height: 1400px;
  position: relative;
  // left: -50px;
  overflow: hidden;
  .yy {
    width: 301px;
    height: 520px;
    // background-image: url(./img/bg1.png);
    background-size: 100%;
    position: absolute;
    top: 80px;
    left: 359px;
    display: flex;
    align-items: center;
    justify-content: center;
    .a {
      width: 301px;
      height: 520px;
    }
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      width: 600px;
      height: 100%;
    }

    .yyl {
      width: 240px;
      height: 60px;
      font-size: 28px;
      color: #ffffff;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
      line-height: 15px;
    }
    .yyjs {
      width: 252px;
      height: 25px;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 80px;
      left: 24px;
      text-align: left;
      line-height: 28px;
    }
  }
  .box1 {
    width: 900px;
    height: 520px;
    position: absolute;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    top: 80px;
    left: 660px;
  }
  .box2 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 0;
    .ghyy {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .cysj {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      text-align: left;
    }
  }
  .box3 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 300px;
    .yyfn {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .fnnl {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq1 {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      text-align: left;
    }
  }
  .box2,
  .box3,
  .box5,
  .box6 {
    border-right: 1px solid #e8e8e8;
  }
  .box5,
  .box6,
  .box7 {
    border-top: 1px solid #e8e8e8;
  }
  .box4 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 600px;
    .yyfn1 {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .fnnl1 {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq2 {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: rgba(170, 169, 169, 0.3);
      text-align: left;
    }
  }
  .box5 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 0;
    .yyfn2 {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .fnnl2 {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq3 {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      text-align: left;
    }
  }
  .box6 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 300px;
    .yyfn3 {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .fnnl3 {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq4 {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      text-align: left;
    }
  }
  .box7 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 600px;
    .yyfn4 {
      width: 273px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 26px;
      text-align: left;
    }
    .fnnl4 {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .ljxq5 {
      position: absolute;
      top: 214px;
      left: 24px;
      width: 171px;
      min-height: 22px;
      font-size: 16px;
      color: rgba(170, 169, 169, 0.3);
      text-align: left;
    }
  }
}
.bg2 {
  width: 301px;
  height: 520px;
  // background-image: url(./img/bg2.png);
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 680px;
  left: 359px;
  display: flex;
  align-items: center;
  justify-content: center;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 520px;
    width: 100%;
  }
  .bg22 {
    width: 301px;
    height: 520px;
  }
  .yxl {
    width: 240px;
    height: 40px;
    font-size: 28px;
    color: #ffffff;
    position: absolute;
    top: 24px;
    left: 24px;
    text-align: left;
  }
  .czxq {
    width: 252px;
    height: 50px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 80px;
    left: 24px;
    text-align: left;
    line-height: 28px;
  }
}
.xbox1 {
  width: 900px;
  height: 520px;
  position: absolute;
  border-top: 1px solid #e8e8e8;
  // border-right: 1px solid #e8e8e8;
  // border-bottom: 1px solid #e8e8e8;
  top: 680px;
  left: 660px;
  .xbox2 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 0;
    .ppyx {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .yxfa {
      width: 252px;
      // height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .aljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox3 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 450px;
    .yxsf {
      min-width: 9.167vw;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .zyjz {
      width: 252px;
      // height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .bljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox2,
  .xbox3 {
    border-bottom: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
  }
  .xbox2,
  .xbox5 {
    border-right: 1px solid #e8e8e8;
  }
  .xbox5,
  .xbox6 {
    border-bottom: 1px solid #e8e8e8;
  }
  .xbox6 {
    border-right: 1px solid #e8e8e8;
  }
  .xbox3 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0;
    left: 300px;
    .yxsf {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .zyjz {
      width: 252px;
      height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .bljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox5 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 0px;
    .xft {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .kszx {
      width: 252px;
      // height: 13s0px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .cljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox6 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 300px;
    .zjtd {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .jjxzz {
      width: 252px;
      // height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .dljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox8 {
    border-bottom: 1px solid #e8e8e8;
    // border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
  }
  .xbox8 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 0px;
    left: 600px;
    .yxsf {
      min-width: 60px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .zyjz {
      width: 252px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .bljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
  .xbox7 {
    border-left: 1px solid #e8e8e8;
  }
  .xbox7 {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 260px;
    left: 600px;
    .zjtd {
      min-width: 80px;
      height: 28px;
      font-size: 20px;
      color: #333333;
      position: absolute;
      top: 24px;
      left: 24px;
      text-align: left;
    }
    .jjxzz {
      width: 252px;
      // height: 130px;
      font-size: 16px;
      color: #999999;
      position: absolute;
      top: 66px;
      left: 24px;
      text-align: left;
    }
    .dljxq {
      width: 83px;
      min-height: 22px;
      font-size: 16px;
      color: #007aff;
      position: absolute;
      top: 214px;
      left: 24px;
    }
  }
}
</style>
